<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工科课程题目生成器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 添加自定义样式 -->
    <style>
        .question-card {
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .difficulty-badge {
            margin-left: 10px;
        }
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        /* 添加新的样式 */
        .main-container {
            display: flex;
            gap: 20px;
        }
        .form-section {
            flex: 0 0 400px;
        }
        .result-section {
            flex: 1;
            min-height: 100vh;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
            }
            .form-section {
                flex: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <h1 class="text-center mb-4">工科课程题目生成器</h1>
        
        <div class="main-container">
            <!-- 左侧表单部分 -->
            <div class="form-section">
                <div class="card">
                    <div class="card-body">
                        <!-- 原有表单内容 -->
                        <form id="questionForm">
                            <div class="mb-3">
                                <label for="courseName" class="form-label">课程名称</label>
                                <input type="text" class="form-control" id="courseName" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">题目类型及数量</label>
                                <div class="question-type-container">
                                    <div class="form-check mb-2 d-flex align-items-center">
                                        <input class="form-check-input" type="checkbox" value="选择题" id="choiceQuestion">
                                        <label class="form-check-label mx-2" for="choiceQuestion">选择题</label>
                                        <input type="number" class="form-control form-control-sm w-25" id="choiceQuestionNum" min="0" max="10" value="0">
                                    </div>
                                    <div class="form-check mb-2 d-flex align-items-center">
                                        <input class="form-check-input" type="checkbox" value="计算题" id="calculationQuestion">
                                        <label class="form-check-label mx-2" for="calculationQuestion">计算题</label>
                                        <input type="number" class="form-control form-control-sm w-25" id="calculationQuestionNum" min="0" max="10" value="0">
                                    </div>
                                    <div class="form-check mb-2 d-flex align-items-center">
                                        <input class="form-check-input" type="checkbox" value="简答题" id="shortAnswerQuestion">
                                        <label class="form-check-label mx-2" for="shortAnswerQuestion">简答题</label>
                                        <input type="number" class="form-control form-control-sm w-25" id="shortAnswerQuestionNum" min="0" max="10" value="0">
                                    </div>
                                    <div class="form-check mb-2 d-flex align-items-center">
                                        <input class="form-check-input" type="checkbox" value="填空题" id="fillInBlankQuestion">
                                        <label class="form-check-label mx-2" for="fillInBlankQuestion">填空题</label>
                                        <input type="number" class="form-control form-control-sm w-25" id="fillInBlankQuestionNum" min="0" max="10" value="0">
                                    </div>
                                </div>
                            </div>
                            <!-- 移除原有的题目数量输入框 -->
                            <div class="mb-3">
                                <label for="knowledgeContent" class="form-label">知识内容</label>
                                <textarea class="form-control" id="knowledgeContent" rows="3" required></textarea>
                            </div>
                            <button type="button" onclick="generateQuestions()" class="btn btn-primary w-100">生成题目</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 右侧结果展示部分 -->
            <div class="result-section">
                <div id="loading" class="loading">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">正在生成题目，请稍候...</p>
                </div>
                <div id="progress" style="display: none;" class="mt-3"></div>
                <div id="result" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入自定义 JavaScript -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
</body>
</html>